<template>
    <div id="app">
      <ul>
        <li><div>真实姓名<em>*</em></div><input type="text" placeholder="请填写真实姓名" v-model="bankUserName"></li>
        <li><div>身份证号<em>*</em></div><input type="text" placeholder="请填写身份证号" v-model="cardNo"></li>
      </ul>
      <ul>
        <li><div>银行名称<em>*</em></div><input type="text" placeholder="请输入银行名称" v-model="bankCode"></li>
        <li><div>银行卡号<em>*</em></div><input type="text" placeholder="请输入银行卡号" v-model="bankCardNo"></li>
        <li><div>卡号确认<em>*</em></div><input type="text" placeholder="请确认银行卡号" v-model="bankCardNo"></li>
        <li><div>手机号码<em>*</em></div><input type="text" placeholder="请输入手机号码" v-model="phone"><span class="baseColor" @click="_Getcode">获取验证码</span></li>
        <li><div>验证码<em>*</em></div><input type="text" placeholder="请输入验证码" v-model="smsCode"></li>
      </ul>
      <a class="btn" @click="_bindBankCard">提交</a>
      <div class="reminder">
        <p>实名认证绑定的银行卡仅支持借记卡 </p>
        <p>(其它类型银行卡绑定后将导致无法提现)</p>
      </div>
    </div>
</template>

<script>
  import {localStorageGet,localStorageSet} from '../../../assets/js/localStorage'
    export default {
        name: "not-verify",
      beforeCreate() {
        document.querySelector('body').setAttribute('style', 'background-color:#f3f3f3')
      },
      beforeDestroy() {
        document.querySelector('body').removeAttribute('style')
      },
      data(){
          return {
            bankUserName: '',
            phone: '',
            bankCode: '',
            bankCardNo: '',
            conBankCardNo: '',
            province: '',
            city: '',
            code: '',
            cardNo: '',
            smsCode: '',
            bindOrderNo:''
          }
      },
      methods:{
        _Getcode() {
/*          let params = {
            requestNo: '1112333232323',
            bankCardNo: '6217583600000032058',
            cardNo: '612401199505051386',
            userUid: localStorageGet('userUid'),
            channelType: 'YIBAO',
            phone: '13928996637',
            bankUserName: '胡妮',
            requestTime: '2018041223344',
            bankCode: 'BOC',
            accountType: 'PRIVATE',
            province: '广东省',
            city: '广州市',
            sysTag: 'ssmall'
          }*/
           let params = {
             requestNo: '1112333232323',
             bankCardNo: this.bankCardNo,
             cardNo: this.cardNo,
             userUid: localStorageGet('userUid'),
             channelType: 'YIBAO',
             phone: this.phone,
             bankUserName: this.bankUserName,
             requestTime: '2018041223344',
             bankCode: 'BOC',
             accountType: 'PRIVATE',
             province: this.province,
             city: this.city,
             sysTag: 'ssmall',
           }
          let _this = this
          this.$http({
            url: '/bank/trade/bank/biz/bind',
            method: 'post',
            data: params,
            transformRequest: [function (data) {
              data = _this.$Qs.stringify(data);
              return data;
            }],
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}
          })
            .then(function (response) {
              //console.log(response);
              _this.bindOrderNo = response.data.data.bindOrderNo
              localStorageSet('bindOrderNo',_this.bindOrderNo)
            })
            .catch(function (error) {
              console.log(error);
            })
        },
        _bindBankCard() {
          let params = {
            requestNo: '1112333232323',
            channelType: 'YIBAO',
            bindOrderNo: this.bindOrderNo,
            userUid: localStorageGet('userUid'),
            tradeDate: '20180410220322',
            smsCode: this.smsCode,
            sysTag: 'ssmall',
          }
          let _this = this
          this.$http({
            url: '/bank/trade/bank/biz/bind/ack',
            method: 'post',
            data: params,
            transformRequest: [function (data) {
              data = _this.$Qs.stringify(data);
              return data;
            }],
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}
          })
            .then(function (response) {
              if(response.data.rc == 200){
                _this.$router.push('/realName')
              }

            })
            .catch(function (error) {
              console.log(error);
            })
        }
      }
    }
</script>

<style lang="less" scoped>
#app {
  ul {
    background: #fff;
    border-top: 1px solid #dcdcdc;
    border-bottom: 1px solid #dcdcdc;
    margin-top: 0.5rem;
    li {
      font-size: 0.597rem;
      line-height: 1.877rem;
      margin-left: 0.5rem;
      border-bottom: 1px solid #dcdcdc;
      display: flex;
      padding-right: 0.5rem;
      &:last-child{
        border-bottom: 0;
      }
      &:nth-of-type(4){
        input {
          flex: 5;
        }
      }
      div {
        flex: 3;
        em {
          color: #ff4e33;
          margin-left: 0.3rem;
        }
      }
      input {
        font-size: 0.554rem;
        flex: 7;
        border: 0;
        outline: none;
      }
    }
  }
  .btn {
    line-height: 1.8rem;
    margin: 1.87rem 0.5rem;
  }
  .reminder {
    font-size: 0.469rem;
    color: #0c1a4e;
    text-align: center;
    margin-top: 8rem;
  }
}
</style>
